<template>
    <keep-alive>
        <div class="home">
            <div class="top">
                <div class="header">
                    <h3 class="title">{{org_name}}</h3>
                    <div>
                        <i @click="toSearch" class="iconfont iconxuanchuan_icon_sousuo" style="color:white;font-size:19px;"></i>
                        <i @click="toInformation" class="iconfont iconxuanchuan_icon_xiaoxi" :class="{'hasNews':indexData.message_notification}" style="color:white;font-size:19px;"></i>
                    </div>
                </div>
            </div>

            <div class="index-banner">
                <div class="topic">
                    <div @click="organizationLife">
                        <img src="../../assets/img/news@2x.png" alt>
                        <span>新闻宣传</span>
                    </div>
                    <div @click="navToGG" >
                        <img src="../../assets/img/notice@2x.png" alt>
                        <span>通知公告</span>
                    </div>
                    <div @click="navTocs">
                        <!--/organization/construction-->
                        <img src="../../assets/img/build@2x.png" alt>
                        <span>组织建设</span>
                    </div>
                    <div @click="classify">
                        <img src="../../assets/img/plan@2x.png" alt>
                        <span>工作计划</span>
                    </div>
                    <div @click="openClick">
                        <img src="../../assets/img/meeting@2x.png" alt>
                        <span>党的会议</span>
                    </div>
                    <div @click="workPlan">
                        <img src="../../assets/img/dangfei@2x.png" alt>
                        <span>党费缴纳</span>
                    </div>

                    <div @click.stop="navToSX">
                        <img src="../../assets/img/huibao@2x.png" alt>
                        <span>思想汇报</span>
                    </div>
                    <div @click="navToFFCL">
                        <img src="../../assets/img/fanfu@2x.png" alt>
                        <span>反腐倡廉</span>
                    </div>
                    <div @click="activityApply">
                        <img src="../../assets/img/shuju@2x.png" alt>
                        <span>党建数据</span>
                    </div>
                    <div @click="show_more">
                        <img src="../../assets/img/gengduo@2x.png" alt>
                        <span>更多</span>
                    </div>
                </div>
                <!--<div class="top-banner" :class="{'skt-loading':!indexData.soundbite}" v-if="!indexData.soundbite">-->
                <!--<img src="../../assets/img/top_banner_1.png" class="skeleton"   alt="">-->
                <!--</div>-->
                <div class="top-banner " :class="{'skt-loading':!indexData.soundbite}" v-if='nosoundbite'>
                    <!--<img src="../../assets/img/top_banner_1.png" class="skeleton"   alt="">-->
                    <p class="skeleton">
                        <img src="r_1.png"   v-if="nosoundbite" alt="">
                        <img :src=indexData.soundbite&&indexData.soundbite[0]&&indexData.soundbite[0].photo  v-else  alt="">
                    </p>
                </div>
            </div>
            <div class="blank" ></div>
            <!--骨架屏-->
            <div class="news-wrap " :class="{'skt-loading':!indexData.journalism}" v-if="nojournalism">
                <h3 class="h3-title skeleton">
                    新闻宣传
                    <span class="iconfont skeleton">查看更多</span></h3>
                <div class="news_list " >
                    <ul>
                        <li >
                            <!--v-if="item.sort===1"-->
                            <div   class="news_list_box flex">
                                <div class="article flex-1">
                                    <p class="article_title skeleton">aaaa</p>
                                    <!--<p class="article_source">{{item.source}}</p>-->
                                    <p class="article_source skeleton"> <span class="skeleton">aaa</span><span class="skeleton">aaa</span></p>
                                    <div class="article_info flex skeleton" >
                                        <span class="article_num flex-1 ">人看过</span>
                                        <span class="article_time skeleton">aaaa</span>
                                    </div>
                                </div>
                                <div class="article_img skeleton">
                                    <img src='aa' alt="" onerror="this.onerror=null;this.src='https://media.71ydj.com/FoKciWV_KbpGB65lMhHTCCvt82ca'">
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>



            <!--<div :class="{'skt-loading':!indexData.journalism}" style="height: 30px">-->
            <!--<div class="skeleton" style="height: 20px"></div>-->
            <!--</div>-->

            <!--新闻宣传-->
            <div class="news-wrap" v-if="indexData.journalism&&indexData.journalism.length>0" >
                <h3 class="h3-title " @click="organizationLife" >
                    新闻宣传
                    <span class="iconfont">查看更多</span></h3>
                <div class="news_list" v-if="indexData.journalism&&indexData.journalism.length>0">
                    <ul>
                        <li v-for="(item,index) in indexData.journalism" :key=index>
                            <!--v-if="item.sort===1"-->
                            <div  @click="toNewsDetails(item)" class="news_list_box flex">
                                <div class="article flex-1">
                                    <p class="article_title">{{item.title}}</p>
                                    <!--<p class="article_source">{{item.source}}</p>-->
                                    <p class="article_source">{{item.org_name}}</p>
                                    <div class="article_info flex" >
                                        <span class="article_num flex-1"><span class="iconyanjing iconfont"></span>{{item.examine}}人看过</span>
                                        <span class="article_time">{{getArticleTime(item.create_time)}}</span>
                                    </div>
                                </div>
                                <div class="article_img">
                                    <img :src=item.photo alt="" onerror="this.onerror=null;this.src='https://media.71ydj.com/FoKciWV_KbpGB65lMhHTCCvt82ca'">
                                </div>
                            </div>

                            <!--<div v-if="item.photo" class="news_list_box">-->
                            <!--<div class="article2 ">-->
                            <!--<p class="article_title">{{item.title}}</p>-->
                            <!--<p class="article_source">{{item.source}}</p>-->
                            <!--<div class="article_info">-->
                            <!--<span class="article_num"><img src="@as/img/eyes.png" alt="">{{item.num}}人看过</span>-->
                            <!--<span class="article_time">{{item.time}}</span>-->
                            <!--</div>-->
                            <!--</div>-->
                            <!--</div>-->
                        </li>
                    </ul>
                </div>
            </div>
            <div class="blank"></div>
            <!--每日一学-->
            <div class="study-time-zoon" v-if="indexData.study&&indexData.study.partymember_example&&Object.keys(indexData.study.partymember_example).length>0">
                <h3 class="h3-title" @click="navToStudy">
                    学习教育
                    <span class="iconfont ">查看更多</span>
                </h3>
                <div class="study-time flex">
                    <div class="study-left" @click.stop="navToCourse">
                        <div class="study-zoom">
                            <p class="study-title">党员楷模</p>
                            <div class="study-avater">
                                <img :src=indexData.study&&indexData.study.partymember_example&&indexData.study.partymember_example.photo  alt="">
                                <p class="study-award">
                                    {{indexData.study&&indexData.study.partymember_example&&indexData.study.partymember_example.name}}
                                </p>
                            </div>


                            <!--<img src="./img/shouye_yixye_01@2x.png" alt="">-->
                            <!--<p class="study-p1">课程</p>-->
                            <!--<p class="study-p2">专题学习</p>-->
                        </div>
                    </div>
                    <div class="study-right " v-if="indexData.study&&indexData.study.special&&indexData.study.special.length==2">
                        <div class="study-zoom" @click.stop="navToPlan" >
                            <p class="t-1">{{indexData.study&&indexData.study.special&&indexData.study.special[0].title}}</p>
                            <p class="t-2">{{indexData.study&&indexData.study.special&&indexData.study.special[0].describe}} ></p>
                            <!--<img src="./img/shouye_yixye_02@2x.png" alt="">-->
                            <!--<p class="study-p1">计划</p>-->
                            <!--<p class="study-p2">学习计划</p>-->
                        </div>
                        <div class="study-zoom" @click.stop="navToExam">
                            <p class="t-1">{{indexData.study&&indexData.study.special&&indexData.study.special[1].title}}</p>
                            <p class="t-2">{{indexData.study&&indexData.study.special&&indexData.study.special[1].describe}}  ></p>
                            <!--<img src="./img/shouye_yixye_03@2x.png" alt="">-->
                            <!--<p class="study-p1">考试</p>-->
                            <!--<p class="study-p2">每月一考</p>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="blank"  v-if="indexData.study_daily&&indexData.study_daily.length>0"></div>
            <!--每日一学-->
            <div class="learn-everyDay" v-if="indexData.study_daily&&indexData.study_daily.length>0">
                <h3 class="h3-title" @click="navToStudy">
                    学习计划
                </h3>
                <div class="learn-day-wrap">
                    <p class="learn-tips">{{indexData.study_daily&&indexData.study_daily.course}}</p>
                    <p class="learn-title">
                        {{indexData.study_daily&&indexData.study_daily.title}}
                        <!--第三讲 坚持和发展中国特色社会主义是当代 中国发展进步的根本方向-->
                    </p>
                    <div class="flex learn-flex">
                        <p class="learn-time">
                            <i class="iconfont iconxuexi_icon_shijian"></i>
                            <span>{{indexData.study_daily&&indexData.study_daily.duration |conversionToMinuteC}}</span>
                        </p>
                        <p class="learn-button">
                            <span class="">去学习</span>
                        </p>

                    </div>
                </div>
            </div>

            <div class="blank" v-if="indexData.examination_month&&indexData.examination_month.length>0"></div>
            <!--每月一考-->
            <div class="exam-every-month" v-if="indexData.examination_month&&indexData.examination_month.length>0">
                <h3 class="h3-title">学习考试</h3>
                <div class="exam-card">
                    <p class="exam-card-title">{{indexData.examination_month&&indexData.examination_month.title}}</p>
                    <p class="exam-card-time"> <span class="iconfont iconxuexi_icon_shijian"></span>{{indexData.examination_month&&indexData.examination_month.start_time}}-{{indexData.examination_month&&indexData.examination_month.close_time}}</p>
                    <p class="exam-card-button"> 考试中</p>
                </div>

            </div>
            <div class="blank" v-if="indexData.vr&&indexData.vr.length>0"></div>
            <div class="vr-area" v-if="indexData.vr&&indexData.vr.length>0">
                <h3 class="h3-title" @click.stop="navToVr">VR展馆
                    <!--<span class="iconfont " >查看更多</span>-->
                </h3>
                <div class="vr-scroll-wrap">
                    <div class="vr-scorll" :style="{width:indexData.vr&&indexData.vr.length*(330)+'px'}">
                        <a :href="item.path" v-for="(item,index) in indexData.vr" :key="index" ><img :src="item.photo"  alt="" /></a>
                    </div>
                </div>

                <!--<div class="swiper-container" id="swiper2">-->
                <!--<div class="swiper-wrapper">-->
                <!--<div class="swiper-slide" v-for="(item,index) in indexData.vr" :key=index @click.stop="navToUrl(item.path)">-->
                <!--<img :src="item.photo" alt="">-->
                <!--</div>-->
                <!--</div>-->
                <!--<div class="swiper-pagination"></div>-->
                <!--</div>-->
            </div>
            <div class="blank" v-if="indexData.album&&indexData.album.length>0"></div>
            <div class="album" v-if="indexData.album&&indexData.album.length>0">
                <h3 class="h3-title" @click.stop="navToAlbumWrap">党建相册
                    <span class="iconfont ">查看更多</span>
                </h3>
                <div class="album-list">
                    <ul>
                        <li v-for="(item,index) in indexData.album" :key=index @click.stop="navToAlbum(item)">
                            <div class="album-list-item">
                                <div  class="news_list_box">
                                    <div class="article3 ">
                                        <!--<p class="article_title">{{item.title}}</p>-->
                                        <div class="article_img3">
                                            <!--v-for="(pic,index2) in item.photo_address" :key="index2" v-show="index2<3"-->
                                            <div class="album-list-wrap" >
                                                <img  :src=(item.photo_address&&item.photo_address[0]&&item.photo_address[0].photo_address) alt="" onerror="this.onerror=null;this.src='https://media.71ydj.com/FoKciWV_KbpGB65lMhHTCCvt82ca#'">
                                                <p class="album-t1">{{item.title}}</p>
                                                <p class="album-t2"><span class="iconfont iconshuju_icon_rili "></span>05-28</p>
                                            </div>
                                        </div>
                                        <!--<p class="article_source">{{item.org_name}}</p>-->
                                        <!--<div class="article_info flex">-->
                                        <!--<span class="article_num iconyanjing iconfont flex-1">{{item.examine}}人看过</span>-->
                                        <!--<span class="article_time">{{getArticleTime(item.create_time)}}</span>-->
                                        <!--</div>-->
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--<div class="blank" v-if="indexData.red_star&&indexData.red_star.length>0"></div>-->
            <!--<div class="one-heart" v-if="indexData.red_star&&indexData.red_star.length>0">-->
            <!--<h3 class="h3-title">一颗红心-->
            <!--<span class="iconfont " @click.stop="navToHeartPage()">查看更多</span>-->
            <!--</h3>-->
            <!--<div class="one-heart-list">-->
            <!--<div class="one-heart-list-item" v-for="(item,index) in indexData.red_star" :key=index @click.stop="navToHeart(item)">-->
            <!--<p class="heart-user">-->
            <!--<img :src=item.head_photo alt="">-->
            <!--<span>{{item.org_name}}-{{item.name}}</span>-->
            <!--</p>-->
            <!--<p class="heart-title ellipicls-2">-->
            <!--{{item.title}}-->
            <!--</p>-->
            <!--<div class="heart-bottom flex">-->
            <!--<span class="flex-1"><span class="iconfont iconyanjing "></span>{{item.examine}}人看过</span>-->
            <!--<span class="icon-date">{{getArticleTime(item.create_time)}}</span>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<p class="bottom-tips">-->
            <!--七一云党建 专业互联网+智慧云党建平台-->
            <!--</p>-->
            <!--<div class="blank"></div>-->
            <!--&lt;!&ndash;活动报名&ndash;&gt;-->
            <!--<div class="activity">-->
            <!--<h3 class="h3-title" @click.stop="navToActi">活动报名-->
            <!--<span class="iconfont ">查看更多</span>-->
            <!--</h3>-->
            <!--<div class="activity-join">-->
            <!--<p v-for="(item,index) in indexData.activity" :key=index @click.stop="navToActivity(item)">-->
            <!--<span>TOP {{index+1}}:</span>-->
            <!--{{item.title}}-->
            <!--</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="blank"></div>-->
            <!--<div class="president-word">-->
            <!--<h3 class="h3-title">每日金句-->
            <!--&lt;!&ndash;<span class="iconfont iconshuju_icon_youqie"></span>&ndash;&gt;-->
            <!--</h3>-->
            <!--<div class="president-wrap flex" v-for="(item,index) in indexData.soundbite" :key=index @click="toNewsDetails(item)">-->
            <!--<div class="flex-1 president-flex" >-->
            <!--{{item.title}}-->
            <!--</div>-->
            <!--<div class="president-img">-->
            <!--<img :src=item.photo alt="">-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="blank"></div>-->
            <!--&lt;!&ndash;反腐倡廉&ndash;&gt;-->
            <!--<div class="ffcl">-->
            <!--<h3 class="h3-title">反腐倡廉-->
            <!--</h3>-->
            <!--<div class="ffcl-list flex">-->
            <!--<div class="ffcl-item" style="background-image: url('./img/shouye_fanfu_lianjie@2x.png')" @click.stop='navToFFCL'>-->

            <!--<img src="./img/shouye_fanfu_lianjie@2x.png" alt="">-->
            <!--</div>-->
            <!--<div class="ffcl-item" style="background-image: url('./img/shouye_fanfu_fagui@2x.png')" @click.stop='navToFFCL'>-->
            <!--<img src="./img/shouye_fanfu_fagui@2x.png" alt="">-->
            <!--</div>-->
            <!--<div class="ffcl-item" style="background-image: url('./img/shouye_fanfu_jijian@2x.png')" @click.stop='navToFFCL'>-->
            <!--<img src="./img/shouye_fanfu_jijian@2x.png" alt="">-->
            <!--</div>-->
            <!--<div class="ffcl-item" style="background-image: url('./img/shoye_fanfu_xinxiang@2x.png')" @click.stop="navToReport">-->
            <!--<img src="./img/shoye_fanfu_xinxiang@2x.png" alt="">-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="blank"></div>-->
            <!--&lt;!&ndash;VR展馆&ndash;&gt;-->

            <!--&lt;!&ndash;党建电台&ndash;&gt;-->
            <!--<div class="party-tv">-->
            <!--<h3 class="h3-title">党建电台-->
            <!--<span class="iconfont ">查看更多</span>-->
            <!--</h3>-->
            <!--<div class="party-tv-list">-->
            <!--<div class="party-tv-item flex" v-for="(item,index) in indexData.audio" :key=index @click.stop="navToAudio(item)">-->
            <!--<div class="party-tv-left ">-->
            <!--<div class="poster" :style="{backgroundImage:'url(' + `${item.photo}` + ')'}">-->
            <!--<img src="./img/icon_play.png" alt="" >-->
            <!--</div>-->
            <!--<div class="party-tv-dark">-->
            <!--<img src="./img/shouye_yiqu_hei@2x.png" alt="">-->
            <!--</div>-->

            <!--</div>-->
            <!--<div class="flex-1 party-tv-right">-->
            <!--<h3>{{item.title}}</h3>-->
            <!--<p class="ellipicls-2">{{item.content}}</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="blank"></div>-->
            <!--&lt;!&ndash;扶贫在线&ndash;&gt;-->
            <!--<div class="help-poor">-->
            <!--<h3 class="h3-title" >扶贫在线-->
            <!--<span class="iconfont ">查看更多</span>-->
            <!--</h3>-->
            <!--<div class="news_list">-->
            <!--<ul>-->
            <!--<li v-for="(item,index) in indexData.poverty_alleviation" :key=index>-->
            <!--&lt;!&ndash;一张图&ndash;&gt;-->
            <!--<div v-if="item.photo" @click="toNewsDetails" class="news_list_box flex">-->
            <!--<div class="article flex-1">-->
            <!--<p class="article_title">{{item.title}}</p>-->
            <!--<p class="article_source">{{item.org_name}}</p>-->
            <!--<div class="article_info flex">-->
            <!--<span class="article_num iconyanjing flex-1 iconfont">{{item.examine}}人看过</span>-->
            <!--<span class="article_time">{{getArticleTime(item.create_time)}}</span>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="article_img">-->
            <!--<img :src=item.photo alt="" onerror="this.onerror=null;this.src='https://media.71ydj.com/FoKciWV_KbpGB65lMhHTCCvt82ca'">-->
            <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash;无图模式&ndash;&gt;-->
            <!--<div v-if="!item.photo" class="news_list_box">-->
            <!--<div class="article2 ">-->
            <!--<p class="article_title">{{item.title}}</p>-->
            <!--<p class="article_source">{{item.source}}</p>-->
            <!--<div class="article_info flex">-->
            <!--<span class="article_num iconyanjing flex-1">{{item.examine}}人看过</span>-->
            <!--<span class="article_time">{{getArticleTime(item.create_time)}}</span>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</li>-->
            <!--</ul>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="blank"></div>-->
        </div>
    </keep-alive>
</template>

<script>
    import {formatDateTime} from './utils'
    import {mapMutations} from 'vuex'
    export default {
        data() {
            return {
                value1:'',
                page:10,
                indexData:{},
                nojournalism:true,
                org_name:"",
                nosoundbite:true
            }
        },
        computed:{
            getArticleTime(){
                return function (val) {
                    return formatDateTime(val)
                }
            },
            filteredItems: function () {
                return this.indexData.album.slice(0, 3)
            }
        },
        mounted() {
            this.org_name =JSON.parse(Cookies.get('user_71ydj')).parent_organization;
            this.$progress.done();
            console.log(JSON.parse(Cookies.get('user_71ydj')));
            this.getInitData(JSON.parse(Cookies.get('user_71ydj')).organization_id,JSON.parse(Cookies.get('user_71ydj')).id);
            // this.indexData=JSON.parse(local)
            this.seniorNav();
            console.log(this.$store.state.initNews)
        },
        methods: {
            ...mapMutations(['changeSubNav','addNavsenior']),
            navToExam(){
                this.$router.push('learn/onlineExam')
            },
            navToGG(){
                this.$router.push('organization/classify')
            },
            navTocs(){
                this.$router.push('/organization/construction')
            },
            navToPlan(){
                this.$router.push('learn/studyPlan')
            },
            navToSX(){
                this.$router.push('/mine/report/list')
            },
            navToReport(){
                this.$router.push('organization/inform')
            },
            navToFFCL(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='反腐倡廉'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'反腐倡廉'
                });
                this.$router.push('/propaganda/news');
            },
            navTofpdt(){
                // 扶贫动态
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='扶贫动态'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'扶贫动态'
                });
                this.$router.push('/propaganda/news')
            },
            navToActi(){
                this.$router.push('organization/activityApply')
            },
            navToCourse(){
                this.$router.push('learn/learningTopics')
            },
            navToAlbumWrap(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='党建相册'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'党建相册'
                });
                this.$router.push('propaganda/album')
            },
            getInitData(id,uid){
                let that =this;
                console.log(that)
                this.$http.get('/app/NewCustom/extension_page',{
                    org_id:id,
                    uid:uid
                }).then((res)=>{
                    if(res.code==200){
                        this.indexData =res.data;
                        this.$nextTick(function () {
                            that.nosoundbite =false;
                            that.nojournalism =false;
                        })

                    }
                }).then((res)=>{
                    var  swiper1 = new this.Swiper("#swiper1", {
                        autoplay: true,
                        lazy: true,
                        on: {
                            slideChange: function () {
                            },
                        },
                    });
                    var  swiper2 =   new this.Swiper("#swiper2", {
                        autoplay: true,
                        pagination: {
                            el: '.swiper-pagination',
                        },
                    });
                })
            },
            toSearch() {
                this.$router.push('propaganda/details/search')
            },
            toInformation() {
                this.$router.push('propaganda/details/information')
            },
            classify(){
                this.$router.push('organization/workPlan')
            },
            supervise(){
                this.$router.push('organization/supervise')
            },

            selfBuildingList(){
                this.$router.push('organization/selfBuildingList')
            },
            show_more(){
                this.$router.push('/home/applyCation')
            },

            openClick(){
                this.$router.push('/organization/organizationLife')
            },
            reportProblems(){
                this.$router.push('organization/reportProblems')
            },

            workPlan(){
                this.$router.push('/mine/PartyPayment')
            },
            activityDetails(){
                this.$router.push('organization/activityDetails')
            },
            meetingDetails(){
                this.$router.push('organization/meetingDetails')
            },
            summaryDetails(){
                this.$router.push('organization/summaryDetails')
            },
            newSummary(){
                this.$router.push('organization/newSummary')
            },
            activityApply(){
                this.$router.push('home/bigData')
            },
            organizationLife(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='推荐'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                // return false;
                this.$store.commit('changeIndex',{
                    selectName:'推荐'
                });
                this.$router.push('/propaganda/')
            },
            possy_js(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='反腐倡廉'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'反腐倡廉'
                });
                this.$router.push('/propaganda/news')
            },
            toNewsDetails(item) {
                console.log(item)
                this.$router.push('propaganda/details/newsDetails?id='+item.id+'&type='+item.type)
            },
            navToHeart(item){
                this.$router.push('/propaganda/details/loveDetails?id='+item.id)
            },
            navToHeartPage(){
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                console.log(Navsenior)
                Navsenior.forEach((e,index)=>{
                    if(e.class_name=='一颗红心'){
                        console.log(index)
                        this.changeSubNav({
                            class_id: Navsenior[index].id,
                            status:Navsenior[index].status,
                            selectedId:index
                        })
                    }
                })
                this.$store.commit('changeIndex',{
                    selectName:'一颗红心'
                });
                this.$router.push('/propaganda/love')
            },
            navToAudio(item){
                this.$router.push('learn/audioInfo?id='+item.id+'&type='+item.type)
            },
            navToStudy(){
                if(JSON.parse(Cookies.get('user_71ydj')).id){
                    this.$router.push('/learn/studyPlan')
                }else{
                    this.$router.push({
                        path: '/mine'
                    });
                }


            },
            navToVr(){
                this.$router.push('/home/vr')
            },
            navToAlbum(item){
                this.$router.push('propaganda/details/albumDetails?id='+item.id)
            },
            navToActivity(item){
                if(JSON.parse(Cookies.get('user_71ydj')).id){
                    this.$router.push('Organization/activityDetails?uid='+JSON.parse(Cookies.get('user_71ydj')).id+'&id='+item.id)
                }else{
                    this.$router.push({
                        path: '/mine'
                    });
                }
            },
            /**顶级导航*/
            seniorNav() {
                console.log('获取顶级导航')
                this.$http
                    .get("app/My/class_list", {
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                        org_id: JSON.parse(Cookies.get("user_71ydj")).organization_id,
                    })
                    .then(res => {
                        localStorage.setItem('Navsenior',JSON.stringify(res.data))
                    });
            },
            navToUrl(path){
                window.location.href=path;
            },
        },
        components:{
        },
    }
</script>

<style scoped lang="scss">
    *{
        margin: 0;
        padding:0;
    }
    .home{
        width: 100%;
        height: 100%;
        position: relative;
        min-height: 100vh;
        padding: 0 16px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding-bottom: 60px;
        /deep/ #swiper2{
            .swiper-pagination{
                bottom: 6px;
                height: 6px;
            }
            .swiper-pagination-bullet.swiper-pagination-bullet-active{
                width:16px;
                height:5px;
                border-radius:3px;
            }
            .swiper-pagination-bullet{
                opacity: 1;
                width:5px;
                height:5px;
                background:rgba(242,242,242,1);
                border-radius:5px;
                vertical-align: top;
            }
        }
        .top {
            margin: 0 -16px;
            background-repeat: no-repeat;
            /*background-size: 100% 100%;*/
            height: 100px;
            background-image: url("../../assets/img/banner_bg.png");
            background-position: 0 0;
            padding: 0 16px;
            width: auto;
            /*background-size: 100;*/
        }
        .top .header {
            padding: 15px 0 0 0;
            display: flex;
            justify-content: space-between;
        }

        .top .title {
            margin: 0 !important;
            font-size: 19px;
            font-weight: bold;
            color:white;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .header div{
            display: flex;
            align-items: center;
            width: 60px;
            justify-content: space-between;
            .iconxuanchuan_icon_xiaoxi.hasNews{
                position: relative;
                &:after{
                    position: absolute;
                    content: '';
                    right: 0;
                    top: 5px;
                    width: 8px;
                    height: 8px;
                    background:rgb(231,30,27);
                    border-radius: 50%;
                }
            }
        }
        .top img {
            width: 19px;
            height: 19px;
        }
        .my-banner {
            height: 142px;
            box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
            border-radius: 4px;
            margin: 0 auto
        }

        .swiper-slide {
            width: 343px;
            height: 142px;
        }

        .my-banner img {
            height: 100%;
            width: 100%;
        }

        .flex{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }
        /*新闻列表*/
        .news_list {
            overflow: hidden;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            margin-bottom: 10px;
        }

        .news_list_box {
            /*margin-top: 23px;*/
            /*display: -webkit-box;*/
            /*display: -webkit-flex;*/
            /*display: flex;*/
            .article_img3{
                display: flex;
                overflow-x:auto;
                &::-webkit-scrollbar {
                    display: none;
                }
                img{
                    width: 129px;
                    height: 97px;
                }
                .album-list-wrap{
                    width: 129px;
                    height: 192px;
                    background:rgba(255,255,255,1);
                    border:1px solid rgba(234,234,234,1);
                    border-radius:8px;
                    margin-right: 16px;

                    .album-t1{
                        font-size:12px;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:rgba(51,51,51,1);
                        line-height:18px;
                        margin-left: 6px;
                        /*margin-top: 10px;*/
                        margin-right: 7px;
                    }
                    .album-t2{
                        font-size:10px;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:rgba(153,153,153,1);
                        line-height:18px;
                        margin-left: 6px;
                        margin-top: 10px;
                        .iconfont{
                            font-size: 10px;
                            color: #E6E6E6;
                            padding-right:5px;
                        }
                    }
                }

            }
        }
        .flex-1{
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            min-width: 0;
            height: 100%;
            font-size: 12px;
        }
        .news_list ul {
            width: 100%;
        }

        .news_list li {
            display: inline-block;
            width: 100%;
            border-bottom: 1px solid #ddd;
            margin: 5px 0;
            &:last-child{
                border-bottom: 0;
                margin: 0;
            }
        }

        /*一张图片的新闻*/
        .article {
            width: 200px;
            float: left;
        }

        .article_title {
            /*height: 48px;*/
            font-size: 16px;
            color: #333333;
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .article_source {
            font-size: 12px;
            color: #999999;
            margin-top: 6px;
        }

        .article_info {
            width: 100%;
            font-size: 12px;
            color: #999;
            margin-top: 10px;
            vertical-align: bottom;
            justify-content: space-between;
            align-items: baseline;
        }

        .article_info .article_num {
            vertical-align: bottom;
            .iconyanjing{
                font-size: 14px;
            }
        }

        .article_num img {
            width: 13px;
            height: 11px;
            display: inline-block;
            margin-right: 6px;

        }

        .article_info .article_time {
            display: inline-block;
            height: 100%;
            width: 100px;
            margin-right: 15px;
            vertical-align: bottom;
            text-align: right;
        }

        .article_img {
            width: 130px;
            float: right;
            margin-left: 20px;
        }

        .article_img img {
            width: 130px;
            height: 97px;
            border-radius: 4px;
        }

        /*没有图片的新闻*/
        .article2 {
            width: 360px !important;
        }

        /*3张图片*/
        .article3 {
        }

        .article_img3 {
            width: 100%;
            margin: 10px 0 0 0;
        }

        .article_img3 img {
            width: 110px;
            height: 83px;
            border-radius: 4px;
            margin-right: 4px;
        }

        .article_img3 img:last-child {
            margin-right: 0;
        }
        .h3-title{
            font-size: 19px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            padding-bottom: 2px;
            margin: 16px 0;
            line-height: 1;
            span{
                float: right;
                color: #ccc;
                font-weight: normal;
                &.iconfont{
                    font-size: 12px;
                }
            }
        }
        .study-time{
            height: 192px;
            justify-content: space-between;
            /*margin-top: 25px;*/
            margin-bottom: 24px;
            .study-left{
                width: 130px;
                border:1px solid rgba(225,225,225,1);
                border-radius:8px;
                .study-zoom{
                    height: 100%;
                    background-image: url("../../assets/img/edu-1.png");
                    background-position: -32px 11px;
                    background-repeat: no-repeat;
                    background-size: 120px 140px;
                    .study-title{
                        font-size: 15px;
                        color: #a63a28;
                        font-weight: bold;
                        padding-top: 16px;
                        padding-left: 15px;
                        margin-bottom: 10px;
                    }
                    .study-avater{
                        margin: 0 auto;
                        text-align: center;
                        position: relative;
                        padding-bottom:32px;
                        img{
                            width: 86px;
                            height: 86px;
                            border-radius: 50%;
                            border: 3px solid white;
                            box-sizing: border-box;
                            margin: 0 auto;
                            z-index: -1;
                        }
                        &:after{
                            position: absolute;
                            content: '';
                            width:15px;
                            height:2px;
                            left: 50%;
                            bottom: 0;
                            transform: translateX(-50%);
                            background:rgba(248,242,241,1);
                            border-radius:1px;
                        }
                    }
                    .study-award{
                        position: absolute;
                        font-size: 13px;
                        color: white;
                        width: 96px;
                        height: 21px;
                        background-image: url("../../assets/img/award.png");
                        background-repeat: no-repeat;
                        background-position: center;
                        left: 50%;
                        transform: translateX(-50%);
                        top: 70px;
                        text-align: center;
                        background-size: 96px 21px;
                        z-index: 2;

                    }
                    /*img{*/
                    /*width: 100%;*/
                    /*}*/
                }

            }
            .study-right{
                width: 201px;
                .study-zoom{
                    width: 100%;
                    height: 90px;
                    background:linear-gradient(90deg,rgba(244,178,96,1) 0%,rgba(246,206,148,1) 100%);
                    background-image: url("../../assets/img/index-top-2.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    border-radius:8px;
                    .t-1{
                        font-size:15px;
                        font-family:PingFang-SC-Medium;
                        font-weight:bold;
                        color:rgba(224,119,17,1);
                        padding-top: 15px;
                        padding-bottom: 4px;
                        padding-left: 15px;
                        max-width: 100%;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;

                    }
                    .t-2{
                        width: 150px;
                        padding-right: 20px;
                        height:18px;
                        background:linear-gradient(108deg,rgba(244,166,81,1) 0%,rgba(252,195,133,1) 100%);
                        border-radius:18px;
                        margin-left: 15px;
                        font-size:11px;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:rgba(255,255,255,1);
                        padding-left: 6px;
                        max-width: 100%;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                    img{
                        width: 100%;
                    }
                    &:nth-child(2){
                        margin-top: 11px;
                        background:linear-gradient(90deg,rgba(130,177,243,1) 0%,rgba(195,215,252,1) 100%);
                        background-image: url("../../assets/img/index-top-3.png");
                        background-position: center;
                        background-repeat: no-repeat;
                        .t-1{
                            color: #5C82B0;
                        }
                        .t-2{
                            background:linear-gradient(90deg,rgba(135,178,231,1) 0%,rgba(182,208,244,1) 100%);
                        }
                    }
                }
            }
            .study-p1{
                font-size: 18px;
                color: rgba(51, 51, 51, 1);
                padding-left: 26px;
                padding-top: 24px;
            }
            .study-p2{
                color: rgba(153, 153, 153, 1);
                font-size: 12px;
                padding-left: 26px;
            }
        }
        .activity-join{
            padding-bottom: 30px;
            p{
                font-size:14px;
                color: rgba(51, 51, 51, 1);
                padding: 16px 0;
                span{
                    color: rgba(254, 141, 29, 1);
                    font-size: 14px;
                    font-weight: bold;
                    margin-right: 10px;
                }
                border-bottom: 1px solid rgba(229, 229, 229, 1);
                &:last-child{
                    border-bottom: 0;
                }
            }

        }
        .president-wrap{
            height: 97px;
            margin-top: 24px;
            .president-flex{
                font-size: 16px;
                color: rgba(51, 51, 51, 1);
            }
            .president-img{
                width: 130px;
                height: 97px;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    -webkit-border-radius: 5px;
                }
            }
        }
        .ffcl{
            /*margin-top: 30px;*/
            margin-bottom: 20px;
            .ffcl-list{
                flex-wrap: wrap;
                margin-top: 24px;
                justify-content: space-between;
                .ffcl-item{
                    height: 75px;
                    width: 165px;
                    margin-bottom: 13px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .vr-area{
            margin-bottom: 30px;
            &::-webkit-scrollbar {
                display: none;
            }
            .vr-scroll-wrap{
                height: 120px;
                overflow-x: auto;
                overflow-y: hidden;
            }
            .vr-scorll{
                height: 100%;
                img{
                    display: inline-block;
                    width: 275px;
                    height: 117px;
                    margin-right: 15px;
                    border: 1px solid #EAEAEA;
                    border-radius: 8px;
                    box-sizing: content-box;
                }
            }
            .swiper-container{
                height:116px;
                margin: 0 auto;
                margin-top: 20px;
                box-shadow:0px 8px 24px 0px rgba(198,198,198,0.2);
                .swiper-slide{
                    height: 100%;

                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }

        }
        .party-tv{
            margin-bottom: 30px;
            .party-tv-list{
                margin-top: 20px;
                .party-tv-item{
                    height: 100px;
                    z-index: 1;
                    background:rgba(255,255,255,1);
                    box-shadow:0px 8px 24px 0px rgba(198,198,198,0.2);
                    border-radius:8px;
                    -webkit-border-radius: 8px;
                    margin-bottom: 15px;
                    .party-tv-left{
                        width: 80px;
                        overflow: hidden;
                        margin-right: 20px;
                        position: relative;
                        margin-left: 10px;
                        .poster{
                            /*background-image: url("/img/shouye_yiqu_fengmian@2x.png");*/
                            width: 56px;
                            height: 56px;
                            background:rgba(204,204,204,1);
                            border-radius:8px;
                            z-index: 2;
                            position: absolute;
                            left: 0;
                            top:13px;
                            img{
                                position: absolute;
                                left: 0;
                                top:0;
                                right: 0;
                                bottom: 0;
                                margin: auto;
                                width: 30px;
                                height: 30px;
                            }
                        }
                        .party-tv-dark{
                            position: absolute;
                            left: 24px;
                            top:13px;
                            width: 55px;
                            height: 55px;
                            img{
                                width: 100%;
                                z-index: -1;
                            }
                        }
                    }
                    .party-tv-right{
                        h3{
                            font-size:16px;
                            font-weight:bold;
                            color:rgba(51,51,51,1);
                            margin-bottom: 10px;
                            margin-top: 13px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        p{
                            font-size:12px;
                            font-weight:500;
                            color:rgba(102,102,102,1);
                        }
                    }
                }
            }
        }
        .help-poor{
            margin-bottom: 30px;

        }
        .ellipicls-2{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .one-heart{
            margin-bottom: 32px;
            .one-heart-list{
                /*margin-top: 15px;*/
                .one-heart-list-item{
                    background:rgba(255,255,255,1);
                    /*box-shadow:0px 8px 20px 0px rgba(0, 0, 0, 0.08);*/
                    border-radius:4px;
                    /*padding: 0px 0px 0px 0px;*/
                    margin-bottom: 15px;
                    .heart-title{
                        font-size:16px;
                        font-weight:500;
                        line-height:24px;
                        padding-left: 33px;
                        color: #666666;
                    }
                    .heart-user{
                        font-size: 12px;
                        line-height: 1;
                        padding-bottom: 10px;
                        /*padding-top: 10px;*/
                        /*padding-bottom: 18px;*/
                        img{
                            width: 25px;
                            height: 25px;
                            border-radius: 50%;
                            vertical-align: middle;
                            margin-right: 8px;
                        }
                        span{
                            color: rgba(51, 51, 51, 1);
                            font-size: 12px;
                            vertical-align: middle;
                            font-weight:bold;
                        }
                    }
                    .heart-bottom{
                        margin-left: 33px;
                        padding-top: 16px;
                        border-bottom: 1px solid #E6E6E6;
                        padding-bottom: 12px;
                        span.iconfont{
                            font-size:12px;
                            color:rgba(153,153,153,1);
                            overflow: hidden;
                        }
                        span.icon-date{
                            width: 75px;
                            color: rgba(153, 153, 153, 1);
                            font-size: 12px;
                            text-align: right;
                        }
                    }
                    &:last-child{
                        .heart-bottom{
                            border-bottom: 0;
                        }
                    }
                }
            }
        }
        span.iconyanjing{
            &:before{
                margin-right: 4px;
            }
        }
        .blank{
            height:16px;
            background: #f5f4f1;
            margin: 0 -16px;
        }
        .top-banner{
            height: 127px;
            width: 100%;
            margin-bottom: 10px;
            p{
                width: 95%;
                height: 127px;
                margin: 0 auto;
                display: block;
                border-radius: 200px;
                overflow: hidden;
            }
            img{
                width: 100%;
            }
        }
        .index-banner{
            margin: 0 -16px;
            /*background:rgba(255,255,255,1);*/
            /*border-radius:40px 40px 0px 0px;*/
            /*background: white;*/
            .topic {
                width: 100%;
                /*margin-top: 25px;*/
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                /*margin-bottom: 20px;*/
                background:rgba(255,255,255,1);
                border-radius:20px 20px 0px 0px;
                margin-top: -20px;
                padding-top: 20px;
                & > div {
                    width:20%;
                    /*height: 60px;*/
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 15px;
                    img {
                        width: 51px;
                        height: 51px;
                    }

                    span {
                        font-size: 12px;
                        color: #333;
                    }
                }

                * {
                    font-size: 14px;
                }
            }

        }
        .learn-everyDay{
            padding-bottom: 24px;
            .learn-tips{
                display: inline-block;
                vertical-align: top;
                height:26px;
                line-height: 26px;
                background:rgba(255,229,215,1);
                border:1px solid rgba(255,196,178,1);
                border-radius:4px;
                font-size:12px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(223,95,58,1);
                padding: 0 10px;
                /*overflow: hidden;*/
                text-overflow: ellipsis;
                white-space: normal;
                position: relative;
                &:before{
                    position: absolute;
                    content: '';
                    left: 7px;
                    bottom: -5px;
                    width: 10px;
                    height:5px;
                    background-image: url("../../assets/img/conner.png");
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 10px 5px;
                }
                /*&:before{
                    position: absolute;
                    display: none;
                    content: "";
                    width: 0;
                    height: 0;
                    left:6px;
                    border: 6px solid transparent;
                    border-top-color:rgba(255,196,178,1);
                    border-bottom-width: 12px;
                    border-left-width: 16px;
                    border-right-width:4px;
                    bottom: -18px;
                }
                &:after{
                    position: absolute;
                    display: none;
                    content: "";
                    width: 0;
                    height: 0;
                    left:8px;
                    border: 6px solid transparent;
                    border-top-color:rgba(255,229,215,1);
                    border-bottom-width: 10px;
                    border-left-width: 14px;
                    border-right-width:3px;
                    bottom: -14px;
                }*/
            }
            .learn-title{
                font-size:16px;
                font-family:PingFang-SC-Medium;
                font-weight:bold;
                color:rgba(51,51,51,1);
                line-height:23px;
                position: relative;
                padding-left:22px;
                padding-bottom: 10px;
                margin-top: -20px;
                &:after{
                    position: absolute;
                    content: '';
                    width: 10px;
                    height: 10px;
                    background-image: url("../../assets/img/index-dot.png");
                    background-position: 0 0;
                    background-repeat: no-repeat;
                    background-size: 10px 10px;
                    left: 0;
                    top: 6px;
                }
            }
            .learn-flex{
                justify-content:space-between;
                .learn-time{
                    padding-left:22px;
                    .iconfont{
                        color: #e6e6e6;
                        margin-right: 5px;
                    }
                    font-size: 12px;
                }
                .learn-button{
                    font-size: 14px;
                    background: #ff801b;
                    width: 70px;
                    height: 26px;
                    line-height: 26px;
                    border: 3px;
                    text-align: center;
                    border-radius: 4px;
                    color: white;
                }
            }
        }
        .exam-every-month{
            .exam-card{
                width:100%;
                height: 105px;
                background:linear-gradient(90deg, #ff811b 0%, #ffd79f 100%);
                background-image: url("../../assets/img/index-top-4.png");
                background-position: center;
                margin-bottom: 25px;
                background-repeat: no-repeat;
                border-radius:8px ;
                .exam-card-title{
                    font-size:16px;
                    font-family:PingFang-SC-Medium;
                    font-weight:bold;
                    color:rgba(255,255,255,1);
                    line-height:24px;
                    padding-left: 22px;
                    padding-top: 15px;
                }
                .exam-card-time{
                    font-size: 12px;
                    color: #ffefdf;
                    padding-top: 8px;
                    padding-bottom: 6px;
                    padding-left: 22px;
                    .iconfont{
                        font-size: 10px;
                        padding-right: 10px;
                    }
                }
                .exam-card-button{
                    float: right;
                    width: 75px;
                    text-align: center;
                    height: 26px;
                    line-height: 26px;
                    font-size: 14px;
                    text-align: center;
                    background: rgba(255,255,255,0.7);
                    color: #ff831d;
                    border-radius: 4px;


                }
            }
        }
        .album{
            .album-list{
                margin-bottom: 24px;
                ul{
                    display: flex;
                    overflow-x: auto;
                    &::-webkit-scrollbar {
                        display: none;
                    }
                }
            }
        }
        .bottom-tips{
            font-size:11px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(205,203,198,1);
            padding-top: 16px;
            padding-bottom: 26px;
            text-align: center;
            background: #f5f4f1;
            margin: 0 -16px;
        }



    }

</style>